/**
 * 多功能按钮
 */
Vue.component('multi-btn', {
    template: `<div style="font-family: '微软雅黑';">
            <div id="multiBtn" v-if="showSuspension" style="padding-bottom: 0.15rem;width: 0.5rem;background-color: #356BFD;position: absolute;z-index: 99999;bottom: 1.5rem;border-start-end-radius: 10px;border-end-end-radius: 10px;">
                <div style="width:0.6rem;height:0.6rem;position: absolute;right: -0.3rem;top: -0.3rem;" @click="closeSuspension">
                    <div style="background-image: url('../images/close-blue.png');width:0.4rem;height: 0.4rem;border-radius: 50%;background-size: 100%;margin-left: 0.1rem;margin-top: 0.1rem;"></div>
                </div>
                <div @click="showModel">
                    <div style="width:0.4rem;height: 0.4rem;margin:auto;background-color: #FFFFFF;border-radius: 50%;background-image: url('../images/chat-a-robot.png');background-size: 65%;background-repeat: no-repeat;background-position: center;margin-top:0.2rem;">
                    </div>
                    <div style="color: #FFFFFF;font-size: 0.25rem;line-height: 0.31rem;margin:auto;width: 80%;text-align: center;margin-top: 0.1rem;">{{currentLLMName}}</div>
                </div>
            </div>
            <div v-if="showChangeModel" id="suspensionBtn" style="height: 2.2rem;width: 4rem;background-color: #FFFFFF;position: absolute;z-index: 99999;bottom: 2rem;border-start-end-radius: 10px;border-end-end-radius: 10px;
            padding: 0.3rem 0.3rem 0.3rem 0rem;box-shadow: 1px 1px 4px 3px rgb(179 175 175 / 50%);">
                <div style="width:0.6rem;height:0.6rem;position: absolute;right: -0.3rem;top: -0.3rem;" @click="closeSuspension">
                    <div style="background-image: url('../images/close-blue.png');width:0.4rem;height: 0.4rem;border-radius: 50%;background-size: 100%;margin-left: 0.1rem;margin-top: 0.1rem;"></div>
                </div>
                <div v-for="item in modelList" @click="changeLLM(item.code)" style="line-height: 0.8rem;padding-left:0.4rem;align-items: center;display: flex;font-size: 0.3rem;" :style="currentLLM == item.code? 'background-color:#EBF0FD' : ''"><img style="width: 0.4rem;height: 0.4rem;margin-right:0.15rem;" src="../images/chat-a-robot.png" />{{item.name}}<img v-if="currentLLM == item.code" style="margin-left: 0.5rem;width: 0.3rem;" src="../images/select-blue.png"/></div>
            </div>
        </div>`,
    data() {
        return {
            //显示悬浮按钮
            showSuspension: false,
            showChangeModel: false,
            //显示悬浮框提示
            showSuspensionTipDialog: false,
            currentLLM: '',
            currentLLMName: '',
            modelList: [{id: '1', code:'ALI', name: '光明大模型A'},{id: '2', code:'BAIDU', name: '光明大模型B'}]
        }
    },
    props: {
        changeable: {
            type: Boolean,
            default: true
        }
    },
    watch: {
    },
    created() {
        // this.currentLLM = localStorage.getItem("largeModel") || 'ALI'
        // this.showSuspension = localStorage.getItem("showSuspension") == 'false' ? false : true || true
        // if(this.currentLLM == 'ALI'){
        //     this.currentLLMName = '光明大模型A'
        // } else if(this.currentLLM == 'BAIDU'){
        //     this.currentLLMName = '光明大模型B'
        // }
    },
    mounted() {
        // document.addEventListener('DOMContentLoaded', function() {
        //     const draggableWindow = document.getElementById('multiBtn');
            
        //     let isDragging = false;
        //     let startX, startY, initialLeft, initialTop;
            
        //     // 触摸开始事件
        //     draggableWindow.addEventListener('touchstart', function(e) {
        //         isDragging = true;
                
        //         const touch = e.touches[0];
        //         const rect = draggableWindow.getBoundingClientRect();
                
        //         startX = touch.clientX;
        //         startY = touch.clientY;
        //         initialLeft = rect.left;
        //         initialTop = rect.top;
                
        //         // e.preventDefault();
        //     }, { passive: false });
            
        //     // 触摸移动事件
        //     document.addEventListener('touchmove', function(e) {
        //         if (!isDragging) return;
                
        //         const touch = e.touches[0];
        //         const dx = touch.clientX - startX;
        //         const dy = touch.clientY - startY;
                
        //         // 计算新位置
        //         let newLeft = initialLeft + dx;
        //         let newTop = initialTop + dy;
                
        //         // 边界检查
        //         const maxLeft = window.innerWidth - draggableWindow.offsetWidth;
        //         const maxTop = window.innerHeight - draggableWindow.offsetHeight;
                
        //         newLeft = Math.max(0, Math.min(newLeft, maxLeft));
        //         newTop = Math.max(0, Math.min(newTop, maxTop));
                
        //         // 应用新位置
        //         draggableWindow.style.left = newLeft + 'px';
        //         draggableWindow.style.top = newTop + 'px';

        //         console.log()
                
        //         e.preventDefault();
        //     }, { passive: false });
            
        //     // 触摸结束事件
        //     document.addEventListener('touchend', function() {
        //         isDragging = false;
        //     });
                       
        //     // 防止点击标题栏时触发其他事件
        //     draggableWindow.addEventListener('click', function(e) {
        //         e.stopPropagation();
        //     });
        // });
    },
    methods: {
        closeSuspension(){
            if(this.showSuspensionTipDialog) {
                return
            }
            this.showSuspensionTipDialog = true
            mui.confirm(
                "关闭后悬浮窗可在<strong>“个人中心-模型选择”</strong>悬浮窗中重新开启",
                "<strong>关闭悬浮窗</strong>",
                ["取消", "关闭"],
                (e) => {
                    if (e.index == 1) {
                        this.dontShowSuspensionTip()
                    } else {
                        this.showSuspensionTipDialog = false
                    }
                }
            );
        },
        dontShowSuspensionTip(){
            this.showSuspensionTipDialog = false
            this.showChangeModel = false
            this.showSuspension = false
            localStorage.setItem("showSuspension", false)
        },
        showModel(){
            if(!this.changeable) {
                mui.toast("模型使用中，无法修改", { duration: 1000, type: "div" });
                return
            }
            this.showSuspension = false
            this.showChangeModel = true
            this.$nextTick(() => {
                this.setupOutsideClickClose(document.getElementById('suspensionBtn'), () => {
                    this.showChangeModel = false;
                    this.showSuspension = localStorage.getItem("showSuspension") == 'false' ? false : true
                })
            })
        },
        setupOutsideClickClose(element, callback) {
            function handleClickOutside(event) {
              if (!element || !element.contains(event.target)) {
                callback();
                document.removeEventListener('click', handleClickOutside);
              }
            }
            // 延迟绑定以避免立即触发
            setTimeout(() => {
              document.addEventListener('click', handleClickOutside);
            }, 0);
        },
        changeLLM(llm){
            localStorage.setItem("largeModel", llm)
            this.currentLLM = llm
            if(this.currentLLM == 'ALI'){
                this.currentLLMName = '光明大模型A'
            } else if(this.currentLLM == 'BAIDU'){
                this.currentLLMName = '光明大模型B'
            }
            this.showChangeModel = false
            this.showSuspension = true
        },
    }
});